<template>
	<view class="">
		<u-radio-group v-model="value" @change="radioGroupChange" size="52">
			<view class="select" v-for="(item, index) in list" :key="index">
				<view class="letfbox">
					<image :src="item.img" mode=""></image>
					<view class="rightboxs">
						<view class="name">
							{{item.name}}
						</view>
						<view class="js">
							{{item.contant}}
						</view>
					</view>
				</view>
				<view class="checkbox">
					<u-radio @change="radioChange" icon-size="40" active-color="#f73f33" :name="item.name"
						:disabled="item.disabled">
					</u-radio>
				</view>
			</view>
		</u-radio-group>



		<view class="title">
			联系人
		</view>
		<view class="inputbox">
			<input type="text" value="" placeholder="请输入您的姓名" />
		</view>
		<view class="title">
			联系电话
		</view>
		<view class="inputbox">
			<input type="text" value="" placeholder="请输入您的联系电话" />
		</view>
		<view class="title">
			店铺名称
		</view>
		<view class="inputbox">
			<input type="text" value="" placeholder="请输入您的店铺名称" />
		</view>
		<view class="title">
			营业执照
		</view>

		<view class="title">
			留言
		</view>
		<view class="textareabox">
			<textarea value="" placeholder="" />
		</view>
		<view class="tjsh">
			提交审核
		</view>
		<image src="" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '商务合作',
						contant: "商户推广曝光，消费引流",
						disabled: false,
						img:"../../static/image/商务合作.png"
					},
					{
						name: '代理合作',
						contant: "招募城市运营商",
						disabled: false,
						img:"../../static/image/供应商代理商.png"
					},
					{
						name: '其他合作',
						contant: "招募城市运营商",
						disabled: false,
						img:'../../static/握手,合作,协作.png'
					}
				],
				value: 'name'
			}
		},
		methods: {
			radioGroupChange() {},
			radioChange() {}

		}
	}
</script>

<style lang="scss" scoped>
	.select {
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 136rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(119, 119, 119, 0.16);
		border-radius: 15rpx;
		margin-left: 30rpx;
		margin-top: 26rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.letfbox {
			display: flex;
			align-items: center;
			width: 500rpx;

			image {
				width: 82rpx;
				height: 82rpx;
			}

			.rightboxs {
				margin-left: 20rpx;

				.name {
					font-family: MicrosoftYaHei;
					font-size: 34rpx;
					color: #222222;
				}

				.js {
					font-family: MicrosoftYaHei;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.checkbox {
			margin-left: 136rpx;
		}

	}

	.title {
		margin-left: 34rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN-Regular;
		color: #222222;
		margin-top: 30rpx;
	}

	.inputbox {
		width: 690rpx;
		height: 72rpx;
		background-color: #ffffff;
		border-radius: 5rpx;
		border: solid 1rpx #e0dfdf;
		margin-left: 34rpx;
		margin-top: 10rpx;
		padding: 16rpx 30rpx;
		box-sizing: border-box;

		input {
			font-size: 24rpx;
		}
	}

	.textareabox {
		width: 689rpx;
		height: 270rpx;
		background-color: #ffffff;
		border-radius: 5rpx;
		border: solid 1rpx #e0dfdf;
		margin-left: 34rpx;
		margin-top: 10prx;
		padding: 20rpx;
		box-sizing: border-box;

		textarea {
			width: 100%;
		}
	}

	.tjsh {
		width: 666rpx;
		height: 90rpx;
		background-color: #f73f33;
		border-radius: 45rpx;
		text-align: center;
		line-height: 99rpx;
		font-family: SourceHanSansCN-Regular;
		font-size: 30rpx;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 90rpx;
	}
</style>
